<template>
  <div class="target-btn-area">
      <target-btn v-for="(item, key) in btnList" :key="key" :index="key" :data="item" @change="changeStatus"></target-btn>
  </div>
</template>
    
<script>
import targetBtn from './targetBtn';

export default {
    components: {
        targetBtn
    },
    data() {
        return {
            btnList:[{
                label:'留学读高中',
                key: 'high-school',
                active: false
            },
            {
                label:'留学读本科',
                key: 'undergraduate',
                active: false
            },
            {
                label: '留学读硕士',
                key: 'master',
                active: false
            },
            {
                label: '留学读博士',
                key: 'scholar',
                active: false
            },
            {
                label: '移民',
                key: 'emigrate',
                active: false
            },
            {
                label: '证明英语能力',
                key: 'ability-to-prove',
                active: false
            },
            {
                label: '提升英语能力',
                key: 'lifting-capacity',
                active: false
            }, 
            {
                label: '工作需要',
                key: 'job-demand',
                active: false
            },
             {
                 label: '我是家长',
                 key: 'family',
                 active: false
             },
             {
                 label: '我是老师',
                 key: 'teacher',
                 active: false
             }
            ]
        }
    },
    methods: {
        changeStatus({ index, val }) {
            this.btnList.forEach((item, i) => {
                if (i !== index) {
                    item.active = false;
                }
            })
            this.btnList[index].active = !this.btnList[index].active;
            this.$emit('change', this.btnList[index]);
        }
    }
};
</script>

<style lang="less">
.target-btn-area {
  background: #fff;
  padding: 16px;
  padding-bottom: 1px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -16px;
  margin-left: -14px;
  margin-bottom: 10px;
}
</style>